<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta contentType="application/x-www-form-urlencoded">
    <link rel="icon" th:href="@{~/fileup/image/common/deep_pro.ico}" type="image/x-icon" />
    <script th:src="@{~/fileup/plugin/js/jquery-3.1.1.min.js}" type="text/javascript"></script>
    <!-- bootstrap main js -->
    <script type="text/javascript" th:src="@{~/fileup/plugin/js/bootstrap.min.js}"></script>
    <!-- fileinput main js -->
    <script type="text/javascript" th:src="@{~/fileup/plugin/js/fileinput.min.js}"></script>
    <!-- chn language js -->
    <script type="text/javascript" th:src="@{~/fileup/plugin/js/zh.js}"></script>
    <!-- bootstrap theme -->
    <link rel="stylesheet" type="text/css" th:href="@{~/fileup/plugin/css/bootstrap.min.css}">
    <!-- fileinput theme -->
    <link rel="stylesheet" type="text/css" th:href="@{~/fileup/plugin/css/fileinput.min.css}">
    <title>图像识别</title>
</head>
<body>
<div class="container">
    <div class="row">
        <h3>001.通用图像识别</h3>
        <form enctype="multipart/form-data" id="image-form" action="/imageRecognition" method="post">
            <div class="col-lg-6">
                <div class="form-group">
                    <input type="file" name="file_image" id="file1" class="file">
                </div>
            </div>
            <div class="col-lg-6">
                <h4>图像识别解析结果：</h4>
                <h4 id="res_title"></h4>
                <a id="baike_link"><span id="baike_title"></span></a>
                <img id="baike_img">
                <p id="baike_desc"></p>
            </div>
        </form>
    </div>
</div>
<script>
    $("#file1").fileinput({
        uploadUrl: '/imageRecognition', //图像识别
        uploadAsync: true, //AJAX设置同步，异步的上传方式 （同步）
        allowedFileExtensions: ['jpg', 'png', 'gif'],//文件类型
        showUpload: true, //是否显示上传按钮
        //browseClass: "btn btn-primary", //按钮样式
        showRemove : true, //显示移除按钮
        dropZoneEnabled: true,//是否显示拖拽区域
        overwriteInitial: false,
        maxFileSize:5000,//单位为kb，如果为0表示不限制文件大小
        maxFilesNum: 10,
        maxFileCount: 4, //表示允许同时上传的最大文件个数
        minFileCount: 0,	//最少文件
        dropZoneTitle: '随意选择一张图片',
        validateInitialCount:false//异步上传返回结果处理
    }).on('fileuploaded', function(event, data, previewId, index) {
        console.log(JSON.stringify(data));
        var res_arr = data.response.result[0];  //获取置信度最高的结果，包含百度百科，但是不一定存在
        var res_arr2 = data.response.result[1]; //获取第二个结果，置信度紧随其后
        // console.log(res_arr.root);

        $('#res_title').text(res_arr.root);     //百科标题
        $('#baike_title').text(res_arr.keyword);//放置百科链接
            var baike_obj = res_arr.baike_info;     //获取百度百科对象
        $('#baike_link').attr("href",baike_obj.baike_url);  //百科URL
        // $('#baike_img').attr("src",baike_obj.image_url);    //百科图片
        $('#baike_desc').text(baike_obj.description);       //百科描述
    });
</script>
</body>
</html>